動くサンプル付!Bootstrap4 で モーダルダイアログを使う方法

公開日:2018/05/08  最終更新日:2018/05/28  カテゴリー:Twitter bootstrap

以前書いた Bootstrap3 の記事に Bootstrap4 の情報を求めてアクセスしてくる人が多かったので、Bootstrap4 でのモーダルに関する記事をかきました。
Bootstrap4 での モーダルの使い方を 実際のソースと動くサンプルと共に 解説します。
ソースをコピー&ペーストすればそのまま使用できます。

1. 必要なファイルを読み込む

次のファイルが必要なので 読み込んでおきましょう。
CSSは head内、 JSは body内の 最後に記述するとよいです。

  • bootstrap.css
  • jquery.js (jquery-3.3.1.min.js)
  • bootstrap.min.js

2. モーダルのコード

コード内にコメントも入っているので 特に解説することはありません。
コピペしてお使いください。

<!-- モダール用ボタン -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">モーダルを表示する</button>

<!-- モーダル部分始まり -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">タイトル</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">これは モーダルダイアログの本文です。</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">保存する</button>
			</div>
		</div>
	</div>
</div>
<!-- モーダル部分終わり -->
サンプルを見る: ①

3. オプション

class の 追加・削除で簡単に行うことができます。

3.1. 垂直方向中央寄せ

縦方向の中央寄せを行います。
先ほど紹介したモーダルのコードの8行目にある .modal-dialog.modal-dialog-centered を加えるだけです。

サンプルを見る: ②

3.2. アニメーションを無効にする

5行目の .fade を削除することで フェードを無効にできます。

サンプルを見る: ③

3.3. サイズを変更する

8行目の .modal-dialog に サイズを指定するクラスを追加することで適用できます。

サイズクラス名サンプル
.modal-lgサンプルを見る: ④
.modal-smサンプルを見る: ⑤

4. JavaScript による制御

参考文献にリンクを載せてある 公式ドキュメントに JSからモーダルを表示したり、動的に内容を書き換える方法が書いてありました。
必要に応じて 公式ドキュメントも見てみると良いと思います。
(暇があれば この記事に内容を追加したいです。)

5. 参考文献

本サイトでは URLに日本語を含んでいます。
メールなどで共有する場合は リンクとして認識されない場合がございますので、こちらをご利用ください。